<template>
  <view class="con">
    <!-- 过滤 -->
    <view class="guolv flex flex_between">
      <view class="guolv_v1">过滤已补贴</view>
      <switch color="#f9bf41" :checked="type===1" @change="changType" style="transform:scale(0.5)" />
    </view>
    <!-- 列表 -->
    <view class="list">
      <view class="listli" v-if="item.state1_total!==0 && item.state1_total!=='0'" @click="goProductOperationDe(item)" v-for="(item,index) in myButieList" :key="index">
        <view class="listlit flex flex_between">
          <view class="listlitz">
            <image class="listlitz_img" :src="item.pic"></image>
          </view>
          <view class="listlity">
            <view class="listlity1 flex flex_between">
              <view class="listlity1z flex flex_between">
                <view class="listlity1z1 flex">
                  <image class="listlity1z1_img" :src="item.pingtai_ico"></image>
                  <view class="listlity1z1_v">{{item.title}}</view>
                </view>
              </view>
            </view>
            <view class="zhen_add" v-if="item.ping_if">{{item.ping_if}}</view>
          </view>
        </view>
        <view class="teshuD">
          <view class="teshuDli flex">
            <view class="teshuDliz">订单 {{item.state1_total}}</view>
            <view class="teshuDliy">
              <text>审核中{{item.state1_1}}</text>
              <text>已核验{{item.state1_2}}</text>
              <text>核验无效<text :class="Number(item.state1_3)>0?'red':''">{{item.state1_3}}</text></text>      
              <text>已补贴{{item.state1_10}}</text>
            </view>
          </view>
          <view class="teshuDli flex">
            <view class="teshuDliz huanse">评价 {{item.state2_total}}</view>
            <view class="teshuDliy">
              <text>审核中{{item.state2_1}}</text>
              <text>已核验{{item.state2_2}}</text>
              <text>核验无效<text :class="Number(item.state2_3)>0?'red':''">{{item.state2_3}}</text></text>      
              <text>已补贴{{item.state2_10}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getProductMyButie, //我的补贴
  } from '@/request/api.js'
  export default {
    data() {
      return {
        openid:uni.getStorageSync('openid'),//获取缓存的openid
		// openid:'oycWz5Y9DMBu6bThEpGJ5a2qzd_c',
        type:0,//已补贴过(0、1已补贴过)
        myButieList:[],
		page:1,//页码
		total:0,//总共的数量
		pagesizes:15//每页数量
      };
    },
    onLoad() {
      // 获取"我的补贴"列表
      // this.getProductMyButieFun()
    },
    onShow() {
		this.page = 1
		this.myButieList = []
      this.getProductMyButieFun()
    },
	onReachBottom() {
	  let totolPage =Math.ceil(this.total / this.pagesizes) 
	  console.log('总共多少页')
	  console.log(totolPage)
	  if(this.page<=totolPage){
	    this.loadMore(); // 当上拉时加载更多数据
	  }
	},
    methods: {
		// 加载更多
		loadMore(){
		  this.page = this.page+1
		  this.getProductMyButieFun()
		},
      // 我的补贴
      getProductMyButieFun(){
        let param = {
			page:this.page,
          openid:this.openid,
          type:this.type
        }
        getProductMyButie(param).then(res=>{
          console.log('获取"我的补贴"列表')
          console.log(res)
          if(res.error_code===0){
			  this.total = Number(res.data.total);
			  this.pagesizes = Number(res.data.pagesizes);
			  let listRe = res.data.arrList
			  if(listRe.length>0){
			    this.myButieList = this.myButieList.concat(listRe);
			  }
            // this.myButieList = res.data.arrList
          }else{
            uni.showToast({
              icon:'none',
              title:res.msg
            })
          }
        })
      },
      
      // 改变是否已提补贴
      changType(e){
        console.log(e)
		this.page = 1
		this.myButieList = []
        let statu = e.detail.value
        if(statu){
          this.type = 1
        }else{
          this.type = 0
        }
        this.getProductMyButieFun()
      },
      
      // 去到补贴专区-详情页
      goProductOperationDe(item) {
        uni.navigateTo({
          url: '/packageA/index/subsidyZoneDe?id='+item.id
        })
      },
    }
  }
</script>

<style scoped lang="scss">
  .con {
    .top {
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 1);
      position: relative;
      z-index: 1;
      padding-top: 54rpx;

      .top1 {
        width: 100%;
        height: auto;
        align-items: normal;

        .top1v1 {
          width: 400rpx;
          height: 140rpx;
          border-radius: 0px 100rpx 100rpx 0px;
          background-color: rgba(249, 191, 65, 1);
          padding: 16rpx 30rpx;
          box-sizing: border-box;

          .top1v1_1 {
            .top1v1_1v1 {
              line-height: 58rpx;
              color: rgba(16, 16, 16, 1);
              font-size: 48rpx;
              font-family: 'AvantGardeFont';
              font-weight: bold;
              margin-top: 5rpx;

              text {
                font-weight: 100;
              }
            }

            .top1v1_1img {
              width: 24rpx;
              position: relative;
              top: -15rpx;
            }
          }

          .top1v1_2 {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
            margin-top: 6rpx;
          }
        }

        .top1v2 {
          width: 220rpx;
          height: 68rpx;
          border-radius: 100rpx;
          background-color: rgba(249, 191, 65, 1);
          justify-content: center;
          margin-right: 30rpx;

          .top1v2_img {
            width: 48rpx;
            height: auto;
          }

          .top1v2_v {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
          }
        }

      }

      .top2 {
        width: 650rpx;
        height: auto;
        margin: 30rpx;
        box-sizing: border-box;
        border-top: 2rpx solid #d3d3d3;
        padding: 30rpx 0;
        margin-top: 50rpx;
        margin-bottom: 20rpx;

        .top2li {
          width: 25%;
          text-align: center;

          .top2li_1 {
            width: 16rpx;
            height: 16rpx;
            border-radius: 100%;
            margin: 0 auto;
            position: relative;
            top: -38rpx;
            background-color: rgba(137, 137, 137, 1);
          }

          .top2li_2 {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
            margin-top: -20rpx;
          }
        }
      }
    }

    .guolv {
      width: 100%;
      height: 90rpx;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 1);
      padding: 24rpx 30rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      padding-right: 0;
z-index: 1;
    position: relative;
      .guolv_v1 {
        color: rgba(0, 0, 0, 1);
        font-size: 28rpx;
      }
    }

    .list {
      width: 100%;
      height: auto;

      .listli {
        width: 100%;
        height: auto;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        overflow: hidden;
        padding: 30rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;

        .listlit {
          width: 100%;
          height: auto;
          align-items: normal;
          overflow: hidden;
          margin-bottom: 30rpx;
          .listlitz {
            width: 120rpx;
            height: 120rpx;
            border-radius: 20rpx;
            // overflow: hidden;
            position: relative;
            margin-right: 24rpx;

            .listlitz_img {
              width:120rpx;
              height: 120rpx;
              border-radius: 20rpx;
            }

            .listlity1z1_v {
              width: 300rpx;
            }

            .listlitz_1 {
              position: absolute;
              height: 32rpx;
              border-radius: 0px 40rpx 40rpx 0px;
              background-color: rgba(249, 65, 65, 1);
              display: inline-block;
              color: rgba(255, 255, 255, 1);
              font-size: 24rpx;
              left: 0;
              top: 20rpx;
              line-height: 27rpx;
              padding: 0 10rpx;
            }

            .listlitz_2 {
              width: 100%;
              height: 44rpx;
              line-height: 44rpx;
              border-radius: 0px 0px 10px 10px;
              background-color: rgba(249, 191, 65, 1);
              color: rgba(16, 16, 16, 1);
              font-size: 24rpx;
              overflow: hidden;
              position: absolute;
              bottom: 0;
              text-align: center;
            }
          }

          .listlity {
            width: 500rpx;
            height: auto;
            .listlity1 {
              width: 100%;

              box-sizing: border-box;

              .listlity1z {
                width: 100%;

                .listlity1z1 {
                  height: 40rpx;
                  .listlity1z1_img {
                    flex-shrink: 0;
                    width: 30rpx;
                    height: 30rpx;
                    border-radius: 100%;
                    margin-right: 10rpx;
                  }

                  .listlity1z1_v {
                    width: 100%;
                   height: 40rpx;
                   line-height: 42rpx;
                    color: rgba(16, 16, 16, 1);
                    font-size: 28rpx;
                    overflow: hidden;
                  }
                }

                .listlity1z2 {
                  height: 36rpx;
                  line-height: 40rpx;
                  border-radius: 40rpx;
                  background-color: rgba(216, 30, 6, 1);
                  color: rgba(16, 16, 16, 1);
                  font-size: 28rpx;
                  padding: 0 10rpx;
                  padding-right: 20rpx;

                  .listlity1z2_img {
                    width: 36rpx;
                    height: auto;
                  }

                  .listlity1z2_v {
                    color: rgba(255, 255, 255, 1);
                    font-size: 28rpx;
                    margin-left: 8rpx;
                    font-family: 'AvantGardeFont';
                  }
                }
              }

            }

            .listlity2 {
              width: 100%;
              padding-right: 30rpx;
              box-sizing: border-box;
              color: rgba(0, 0, 0, 1);
              font-size: 24rpx;
              font-family: 'AvantGardeFont';
              margin-top: 14rpx;

              text {
                font-size: 46rpx;
              }
            }

            .listlity3 {
              width: 100%;
              box-sizing: border-box;
              color: rgba(137, 137, 137, 1);
              font-size: 24rpx;
              margin-top: 42rpx;
              width: 100%;
              text-align: right;

              text {
                font-family: 'AvantGardeFont';
              }
            }

            .listlity4 {
              width: 100%;
              box-sizing: border-box;

              .listlity4cc {
                width: 100%;
                height: 16rpx;
                border-radius: 20rpx;
                margin-top: 6rpx;
                background-color: rgba(232, 230, 230, 1);
                position: relative;
                overflow: hidden;
              }

              text {
                width: 30%;
                height: 16rpx;
                border-radius: 20rpx;
                display: inline-block;
                background-color: rgba(249, 191, 65, 1);
                position: absolute;
                top: 0;
                left: 0;
                ;
              }
            }
          }
        }

        .listlib {
          width: 100%;
          height: auto;
          padding: 30rpx 0;
          padding-bottom: 0;
          box-sizing: border-box;

          .listlib_1 {
            width: 310rpx;
            height: 44rpx;
            background: #f00;
            line-height: 44rpx;
            border-radius: 40rpx;
            overflow: hidden;

            .listlib_1_t1 {
              background-color: rgba(249, 191, 65, 1);
              width: 50%;
              color: rgba(0, 0, 0, 1);
              font-size: 24rpx;
              height: 44rpx;
              display: block;
              text-align: center;
            }

            .listlib_1_t2 {
              background-color: rgba(0, 0, 0, 1);
              width: 50%;
              color: #fff;
              font-size: 24rpx;
              height: 44rpx;
              display: block;
              text-align: center;
            }

            .listlib_1_t3 {
              background-color: rgba(232, 230, 230, 1);
              width: 50%;
              color: rgba(0, 0, 0, 1);
              font-size: 24rpx;
              height: 44rpx;
              display: block;
              text-align: center;
            }
          }
        }
      }
    }

    .zhes_1 {
      width: 100%;
      height: auto;
      text-align: center;
      margin-bottom: 28rpx;
      justify-content: center;

      .zhes_1_img {
        width: 40rpx;
        height: auto;
        margin-right: 8rpx;
      }

      .zhes_1_t {
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .zhes_2 {
      width: 100%;
      height: auto;
      padding: 0 20rpx;
      box-sizing: border-box;
      margin-bottom: 8rpx;

      .zhes_2li {
        color: rgba(0, 0, 0, 1);
        font-size: 28rpx;
        font-weight: bold;
        width: 100%;
        text-align: center;

        text {
          font-family: 'AvantGardeFont';
        }
      }
    }

    .zhes_3 {
      height: 32rpx;
      line-height: 32rpx;
      color: rgba(16, 16, 16, 1);
      font-size: 24rpx;
      width: 100%;
      text-align: center;
      margin-bottom: 20rpx;
    }

    .zhes_4 {
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      background-color: rgba(238, 238, 238, 1);
      padding: 20rpx 30rpx;
      color: rgba(249, 65, 65, 1);
      font-size: 24rpx;
      box-sizing: border-box;
      line-height: 40rpx;
      margin-bottom: 48rpx;
    }

    .zhes_5 {
      width: 100%;
      height: 72rpx;
      border-radius: 100rpx;
      background-color: rgba(249, 191, 65, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      text-align: center;
      line-height: 72rpx;
    }

    .tan {
      padding-bottom: 56rpx;
      margin-top: -231rpx;
    }
  }

  .tan_video {
    width: 650rpx;
    height: 1105rpx;
    padding: 0 0;
    margin-left: -325rpx;
  }

  .tan.tan_video {
    margin-top: -552rpx;
  }

  video {
    width: 650rpx;
    height: 1105rpx;
  }

  .zhen_add {
    width: 100%;
    height: auto;
    border-radius: 10rpx;
    background-color: rgba(255, 246, 228, 1);
    color: rgba(0, 0, 0, 1);
    font-size: 24rpx;
    padding: 10rpx 16rpx;
    box-sizing: border-box;
    margin-top: 12rpx;
  }

  .Countdown {
    height: 96rpx;
    color: rgba(16, 16, 16, 1);
    font-size: 80rpx;
    font-family: 'AvantGardeFont';
    width: 100%;
    text-align: center;
    margin-bottom: 32rpx;
  }

  .dibulicz {
    width: 100%;
    height: auto;
    .dibulicz1 {
      color: rgba(16, 16, 16, 1);
      font-size: 48rpx;
      font-family: 'AvantGardeFont';
      // height: 60rpx;
    }

    .dibulicz2 {
      width: 160rpx;
      height: 44rpx;
      line-height: 44rpx;
      border-radius: 40rpx;
      background-color: rgba(249, 191, 65, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      text-align: center;
      color: rgba(16, 16, 16, 1);
      font-size: 24rpx;
    }

    .dibulicz2.huise {
      background-color: rgba(232, 230, 230, 1);
      color: rgba(16, 16, 16, 1);
    }

    .dibulicz2.hongse {
      background-color: rgba(249, 65, 65, 1);
      color: rgba(255, 255, 255, 1);
    }
  }
  .teshuD{
    width: 100%;
    height: auto;
    .teshuDli{
      width: 100%;
      width: 100%;
      height: 52rpx;
      line-height: 52rpx;
      border-radius: 10rpx;
      background-color: rgba(255,246,228,1);
      font-size: 24rpx;
      overflow: hidden;
      margin-bottom: 10rpx;
      .teshuDliz{
        height: 52rpx;
        line-height: 52rpx;
        width: 120rpx;
        overflow: hidden;
        text-align: center;
        background-color: rgba(0,0,0,1);
        color: rgba(255,255,255,1);
        border-top-left-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
      }
      .teshuDliz.huanse{
        background-color: rgba(249,191,65,1);
        color: rgba(0,0,0,1);
      }
      .teshuDliy text{
        margin-left: 20rpx;
        text{
          margin-left: 0;
        }
        .red{
          color:red;
        }
      }
    }
    .teshuDli:last-child{
      margin-bottom: 0;
    }
  }
</style>